import React, { Component } from 'react';
import * as service from '../../../../api'
import "./index.css"
import { withRouter } from 'react-router-dom'
import { InfiniteScroll } from 'antd-mobile'
class Recommend extends Component {
    constructor(props){
        super(props);
        this.state = {
            count:0,
            recommendlist:[],
            hasMore:true
        }
    }
    async componentDidMount(){
        //发请求 获取推荐列表
        // var res = await service.pro_recommendlist({count:1,limitNum:4});
        // this.setState({ recommendlist: res.data.data });
    }
    toDetail(proid){
        // 跳路由到详情页
        // this.props.history.push('/detail');
        
        // 跳路由传参, 方式一: 动态路由传参, 刷新页面参数不会丢失
        // this.props.history.push('/detail/'+proid);
        
        // 跳路由传参, 方式二: 固定路由传参 state , 刷新页面参数不会丢失
        // this.props.history.push({ pathname:'/detail',state:{id:proid} });

        // 跳路由传参, 方式三: 固定路由传参 query ,刷新页面参数会丢失,不可靠
        // this.props.history.push({ pathname:'/detail',query:{id:proid} });
    }
    async loadMore(){
        console.log('loadmore');
        //请求下一页数据
        var res = await service.pro_recommendlist({count:this.state.count+1,limitNum:4});
        if( res.data.data.length ){
            //请求有响应数据,保存请求来的下一页数据
            this.setState({ 
                recommendlist: [...this.state.recommendlist,...res.data.data] ,
                count: this.state.count+1
            });
        }else{
            //请求无响应数据
            this.setState({
                hasMore:false
            })
        }
    }
    render() {
        return (
            <div className='recommend'>
                {
                    this.state.recommendlist.map((item,index)=>{
                        return (
                            <div onClick={()=>{this.toDetail(item.proid) }} className="good" key={index}>
                                <img src={item.img1} alt="" />
                                <div className="name">{item.proname}</div>
                                <div className="price">{item.originprice}</div>
                            </div>
                        )
                    })
                }
                {/* 无限滚动组件 */}
                <InfiniteScroll hasMore={this.state.hasMore} loadMore={this.loadMore.bind(this)} />
            </div>
        );
    }
}

export default withRouter(Recommend);